<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>无标题文档</title>
</head>
<style>
		body, html {  
		  margin: 0;  
		  padding: 0;  
		  width: 100%;  
		  height: 500px;  
		  background-color: #F4F4F4
		}  
		.navbar {
			width: 100%;
			overflow: hidden;
			background-color: #333;
		}
		.dropbtn {
			background-color: #333;
			color: white;
			padding: 16px;
			font-size: 16px;
			border: none;
			cursor: pointer;
			width: 100%; 
		}
		.dropdown{
			width: 100px;
			float: left;
			
		}
		.dropdown-content {
			display: none;
			position: absolute;
			left: 0;
			background-color: #f9f9f9;
			min-width: 100%; 
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			z-index: 1;
		}
		.dropdown-content a {
			color: black;
			padding: 12px 16px;
			text-decoration: none;
			display: block;
			text-align: left;
			
		}
		.dropdown:hover .dropdown-content {
			display: block;
		}
		.dropdown-content a:hover {
			background-color: #ddd;
		}
		.dropdown:hover .dropbtn {
			background-color: #555;
			
		}
	</style>
<body>
<nav class="navbar">
    <div class="dropdown">
        <button class="dropbtn">菜单1</button>
        <div class="dropdown-content">
            <a href="#">下拉菜单1</a>
            <a href="#">下拉菜单2</a>
            <a href="#">下拉菜单3</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="dropbtn">菜单2</button>
        <div class="dropdown-content">
            <a href="#">下拉菜单11</a>
            <a href="#">下拉菜单22</a>
            <a href="#">下拉菜单33</a>
        </div>
    </div>
		<div class="dropdown">
        <button class="dropbtn">菜单2</button>
        <div class="dropdown-content">
            <a href="#">下拉菜单111</a>
            <a href="#">下拉菜单222</a>
            <a href="#">下拉菜单333</a>
        </div>
    </div>
</nav> 
</body>
</html>
